// components/CountButton.jsx
import React from "react";

import { connect } from "react-redux";
import { reduceAction } from "../../store/actions";

function CountButton(props) {
  const addTen = () => {
    props.sendAdd(10);
  };
  const reduceTwo = () => {
    props.sendReduce(2);
  };

  return (
    <>
      <button onClick={addTen}> +10 </button>
      <button onClick={reduceTwo}> -2 </button>
    </>
  );
}

const mapDispatchToProps = (dispatch) => {
  return {
    // dispatch 一个 addAction
    sendAdd: (num) => {
      dispatch({
        type: "ADD_NUM",
        payload: {
          num,
        },
      });
    },
    // dispatch 一个 reduceAction
    sendReduce: (num) => {
      dispatch(reduceAction(num));
    },
  };
};

export default connect(null, mapDispatchToProps)(CountButton);
